<template>
  <div class="header-com">
    <!--
      分成两个大类
        + 默认不带红色背景
        + 特殊的是带有红色背景
    -->

    <!--
      当前没有登录
        + 应该实现登录按钮 - 是一个路由 routerlink
      如果登录过
        + 应该实现用户名

      判断
        + localStorage 内的 token 和 user_id
    -->
    <span v-if="userStore.is_login" class="login-btn avatar">
      {{ userStore.username }}
    </span>
    <span v-else class="login-btn">
      <router-link to="/login">登录</router-link>
    </span>

    <van-button @click="searchHandler" v-if="$route.meta.search" class="search-btn" type="danger" size="mini">按钮</van-button>

    <van-search @focus="$router.push('/search')" style="margin-right: 50px;" v-if="$route.meta.home" shape="round" background="#C82519" placeholder="搜索">
      <template #left>
        <van-icon style="margin-right: 10px;" name="wap-nav" />
      </template>
    </van-search>

    <van-nav-bar @click-left="$router.back()" v-else :right-text="$route.meta.more ? '···' : ''" left-arrow>
      <template #title>
        <span v-if="title">{{ title }}</span>
        <van-search
          v-else
          @focus="$router.push('/search')"
          v-model="searchText"
          shape="round"
          @update:model-value="searchChangeHandler"
          placeholder="请输入搜索关键词" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script lang="ts" setup>
// 拿到路由元信息
import { onMounted, ref } from 'vue'

// 先拿到 route
import { useRoute, RouterLink, useRouter } from 'vue-router'

// 测试使用一下
import useUserInfo from '@/stores/users'
import { watch } from 'vue';

// 拿到当前的路由信息
const $route = useRoute()
const $router = useRouter()

// 拿到 pinia 存储库信息
const userStore = useUserInfo()

// 准备一个 defineProps 使用的 接口
interface Props {
  title?: string
  str?: string
}

// 接受传递过来的参数
const info = defineProps<Props>()

// 验证登录的函数
const testLogin = async () => {
  // 拿到 token 和 user_id 信息
  const token = window.localStorage.getItem('token')
  const id = window.localStorage.getItem('user_id')

  // 判断 token 和 id 是否存在
  // 如果不存在, 没有登录过
  if (!token || !id) {
    userStore.changeLogin(false)
    return
  }

  // 表示曾经登录过
  userStore.getUser(id)
}

onMounted(() => {
  testLogin()
})

// 定义事件遥控器
const emit = defineEmits(['searchChangeHandler', 'searchBtnHandler'])

// 关联搜索的关键字
const searchText = ref<string>('')

watch(
  () => info.str,
  () => {
    searchText.value = info.str || ''
  },
  { immediate: true }
)

// 搜索的逻辑
const searchHandler = () => {
  // 通知父组件按下了搜索按钮
  searchText.value = searchText.value.replaceAll('\\', '')

  // 需要把我搜索关键字的内容传递到 父组件内 使用
  emit('searchBtnHandler', searchText.value.trim())
}

// 搜索框内内容发生变化的时候触发
const searchChangeHandler = () => {
  searchText.value = searchText.value.replaceAll('\\', '')

  // 需要把我搜索关键字的内容传递到 父组件内 使用
  emit('searchChangeHandler', searchText.value.trim())
}
</script>

<style scoped>
.header-com {
  background-color: #C82519;
  position: relative;
  overflow: hidden;
}

.login-btn {
  position: absolute;
  font-size: 16px;
  color: #333;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.search-btn {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}
</style>
